<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>图片验证码</title>
		<jsp:include page="/WEB-INF/jsp/common/scriptIncEs.jsp"></jsp:include>
		<script type="text/javascript">
			$(function(){
				$("body").bind("keypress",function(event){
					if(event.keyCode=="13"){
						$("#submit").click();
					}
				});
			});
			
			function chageCode(){
				var url = $WEB_ROOT_PATH + '/image/authCode?abc='+Math.random();
		        $('#codeImage').attr('src',url);//链接后添加Math.random，确保每次产生新的验证码，避免缓存问题。
		    }
			
			function submit(){
				var authCode = $("#authCode").val();
				if(authCode==''){
					chageCode();
					$("#codeHTML").css("color","red");
					$("#codeHTML").html("验证码不能为空");
					return;
				}
				var url = $WEB_ROOT_PATH +'/image/submitCode';
				$.ajax({
					url:url,
					type:'POST',
					data:{
						'code':authCode
					},
					dataType:'json',
					success:function(data){
						if(data.success){
							$("#codeHTML").css("color","green");
							$("#codeHTML").html(data.msg);
						}else{
							$("#codeHTML").css("color","red");
							$("#codeHTML").html(data.msg);
							chageCode();
						}
					},
					error:function(msg){
						alert("submitCode error!!!");
					}
				});
			}
		</script>
	</head>
	<body>
		 验证码：<input id="authCode" name="authCode" type="text"/>
	        <!--这里img标签的src属性的值为后台实现图片验证码方法的请求地址-->
	        <label><img type="image" src="<c:url value='/image/authCode'/>" id="codeImage" onclick="chageCode()" title="图片看不清？点击重新得到验证码" style="cursor:pointer;"/></label>
	        <label><a onclick="chageCode()">换一张</a></label>
	        <p id="codeHTML" style="color:red;"></p>
	        <button onclick="submit()" id="submit">验证</button>
	</body>
</html>